<template>
    <div class="aritlce">
        <van-pull-refresh v-model="refreshLoading" @refresh="getNextPageArtice">
            <van-list v-model="loading" @load="getNextPageArtice" :immediate-check="false" :finished="finished"
                finished-text="没有更多了" :error.sync="error" error-text="请求失败，点击重新加载">
                <article-item v-for="obj in articles" :key="obj.art_id" :artcle-info="obj"></article-item>
            </van-list>
        </van-pull-refresh>

    </div>
</template>

<script>
import { getArticleApi } from '@/api'
import ArticleItem from './ArticleItem.vue'
export default {
    props: {
        channelId: [Number, String]
    },
    data() {
        return {
            articles: [],
            loading: false,
            pre_timestamp: '',
            finished: false,
            error: false,
            refreshLoading: false
        }
    },
    components: {
        ArticleItem
    },
    created() {
        this.getArticle()
        //console.log(this.articles)
    },
    methods: {
        async getArticle() {
            const { data: { data: res } } = await getArticleApi(this.channelId, +new Date())
            //  console.log(res)
            this.articles = res.results
            this.pre_timestamp = res.pre_timestamp
        },
        async getNextPageArtice() {
            try {
                const { data } = await getArticleApi(this.channelId, this.pre_timestamp)
                const result = data.data.results
                //如果下滑加载，数据放在最后面，如果下拉刷新，放在前面
                if (this.loading) {
                    this.articles = [...this.articles, ...result]
                } else {
                    this.articles = [...result, ...this.articles]
                }

                //更新时间戳
                this.pre_timestamp = data.data.pre_timestamp
                if (data.data.pre_timestamp === null) {
                    this.finished = true
                }
            }
            finally {
                this.loading = false
                this.refreshLoading = false
            }
        }
    }

}
</script>

<style lang="less" scoped>
//定高
//overflow:auto/scroll/overlay
//::-webkit-scrollbar 滚动槽的样式
//::-webkit-scrollbar-thumb 滚动滑块的样式
.aritlce {
    height: calc(100vh - 100px - 92px - 83px);
    overflow: auto;

    &::-webkit-scrollbar {
        width: 10px;
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background: #3296fa;
        border-radius: 10px;
    }
}
</style>